<template>
    <div>
        <van-search @cancel="back" error-message show-action v-model="value" background="#FEE101" shape="round"
            placeholder="搜索" @search="onSearch" />
    </div>

    <van-card  v-for="item in searchList" :key="item.id" :desc="item.labels"
      :title="item.title" :thumb="item.images">
      <template #tags>
        <van-tag size="medium" color="#ffe1e1" text-color="#ad0000">{{ item.texta }}</van-tag>
        <van-rate size="14" :model-value="item.star" icon="like" void-icon="like-o" />
        <p style="margin-top: 10px;">"{{ item.textb }}"</p>

      </template>
      <template #footer>
        <div>{{ item.num }}人已评论</div>
      </template>
    </van-card>
</template>

<script setup>
import { ref, watch,onMounted } from "vue"
import httpApi from "@/http";
const value = ref('');
console.log(value);
const back = () => history.back();

const searchList = ref([])

// 监听输入框值的变化
watch(value, (newValue) => {
    console.log(newValue); // 在控制台输出输入框的新值
});

onMounted(() => {
    httpApi.IndexApi.querySearchList().then(res => {
        console.log(res);
        //为searchList赋值
        searchList.value = res.data.data
    })
})

const onSearch = async (value) => {
    try {

        const res = await httpApi.IndexApi.search(value);
        console.log(res);
        searchList.value=res.data.data
    } catch (error) {
        console.error(error);
    }
};
</script>

<style lang="scss" scoped>
.van-search__action::v-deep {
    color: var(--van-white);
}
</style>